// 第一个模块 页面滚动到对应区域，电梯导航显示，否则隐藏  返回顶部功能
//  立即执行函数
(function () {
    // 需求：当页面滚动banner区域的距离时候，就显示电梯导航，否则隐藏
    // 获取banner元素
    const banner = document.querySelector('.banner')
    // console.log(banner.offsetTop);
    // 1. 获取电梯导航元素
    const elevator = document.querySelector('.elevator')
    // 2. 给页面添加滚动事件
    window.addEventListener('scroll', function () {
        const n = document.documentElement.scrollTop
        elevator.style.opacity = n >= banner.offsetTop ? 1 : 0
    })
    // 点击返回页面顶部
    // 1. 获取返回顶部元素
    const backTop = document.querySelector('.elevator #backTop')
    backTop.addEventListener('click', function () {
        window.scrollTo(0, 0)
    })
})();

// 第二、第三模块 都放到另外一个立即执行函数里面
(function () {
    // 第二个模块 点击电梯导航对应模块，页面 会跳到对应的模块位置
    // 获取元素
    const list = document.querySelector('.elevator-list')
    // 事件委托
    list.addEventListener('click', function (e) {
        if (e.target.tagName === 'A' && e.target.dataset.name) {     // e.target.dataset，e.target.dataset 为null if判断就为假
            // 排他思想  
            // 先移除原来的类active ，再获取这个active的对象
            const old = document.querySelector('.elevator-list .active')
            // console.log(n);    // null
            // 判断 如果原来有active类的对象，就移除类，如果开始就没有这个对象，就不删除，所以不报错
            if (old) {
                old.classList.remove('active')
            }
            // 当前元素添加 active
            e.target.classList.add('active')
            // 获得自定义属性
            // console.log(e.target.dataset.name);
            // 获得对应大盒子的 offsetTop
            const top = document.querySelector(`.${e.target.dataset.name}`).offsetTop
            // 让页面滚动到对应的位置
            document.documentElement.scrollTop = top
        }
    })
    // 第三个模块 页面滚动到对应位置，电梯导航对应模块自动发生变化
    window.addEventListener('scroll', function () {
        const old = document.querySelector('.elevator-list .active')
        // 判断 如果原来有active类的对象，就移除类，如果开始就没有对象，就不删除，所以不报错
        if (old) {
            old.classList.remove('active')
        }
        // 3.2 判断页面当前滑动的位置，选择小盒子
        // 获取电梯导航栏各个元素
        const hb = document.querySelector('.hb')
        const yp = document.querySelector('.yp')
        const xs = document.querySelector('.xs')
        const tp = document.querySelector('.tp')
        // 滚动的距离
        const n = document.documentElement.scrollTop

        if (n >= hb.offsetTop && n < yp.offsetTop) {
            // 选择第一个小盒子
            document.querySelector('[data-name=hb]').classList.add('active')
        } else if (n >= yp.offsetTop && n < xs.offsetTop) {
            document.querySelector('[data-name=yp]').classList.add('active')
        } else if (n >= xs.offsetTop && n < tp.offsetTop) {
            document.querySelector('[data-name=xs]').classList.add('active')
        } else if (n >= tp.offsetTop) {
            document.querySelector('[data-name=tp]').classList.add('active')
        }
    })

})();